import React, { Component, useState, useEffect } from "react";
import { Input, Space, Table, Tag, Button, Modal } from "antd";
import { AudioOutlined } from "@ant-design/icons";
import moment from "_moment@2.29.1@moment";
import { http } from "../../api";
const { Search } = Input;
export default function ManageList() {
  const [adviselist, setAdviselist] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [showdetails, setShowdetails] = useState({});
  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "类型",
      dataIndex: "category",
      key: "category",
      render: (v, item, index) => {
        return <div>{item.category.join("-")}</div>;
      },
    },
    {
      title: "提交人",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "联系方式",
      dataIndex: "phone",
      key: "phone",
      render: (v, item, index) => {
        return v;
      },
    },
    {
      title: "提交时间",
      dataIndex: "time",
      key: "time",
      render: (v, item, index) => {
        return <div>{moment(item.time).format("YYYY-MM-DD hh:mm:ss")}</div>;
      },
    },
    {
      title: "审核状态",
      dataIndex: "status",
      key: "status",
      render: (v, item, index) => {
        if (item.status == 1) {
          return <Tag color="#f50">未审核</Tag>;
        } else {
          return <Tag color="#108ee9"> 审核通过</Tag>;
        }
      },
    },
    {
      title: "操作",
      render: (v, item, index) => {
        return (
          <div>
            <Button
              type="primary"
              danger
              onClick={() => {
                showModal(item);
              }}
              style={{ marginRight: "10px" }}
            >
              查看
            </Button>
            <Button
              type="primary"
              style={{ marginRight: "10px" }}
              onClick={() => {
                accept(item);
              }}
            >
              接受意见
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => {
                reject(item);
              }}
            >
              驳回
            </Button>
          </div>
        );
      },
    },
  ];
  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: "#1890ff",
      }}
    />
  );
  const showModal = (item) => {
    setIsModalVisible(true);
    setShowdetails(item);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    // console.log(showdetails);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onSearch = (value) => {
    http.searchadviselist({ value }).then((res) => {
      if (res.data.code == 200) {
        setAdviselist(res.data.temp);
      }
    });
  };
  useEffect(() => {
    http.getadviselist().then((res) => {
      if (res.data.code == 200) {
        setAdviselist(res.data.val);
      }
    });
  }, []);
  const accept = (item) => {
    http.updateadviselist({ _id: item._id }).then((res) => {
      if (res.data.code == 200) {
        http.getadviselist().then((res) => {
          if (res.data.code == 200) {
            setAdviselist(res.data.val);
          }
        });
      }
    });
  };
  const reject = (item) => {
    http.delateadviselist({ _id: item._id }).then((res) => {
      if (res.data.code == 200) {
        var temp = adviselist;
        temp = temp.filter((value) => {
          return value._id != item._id;
        });
        setAdviselist(temp);
      }
    });
  };
  return (
    <div>
      <div style={{ width: "300px", marginBottom: "30px" }}>
        <Search placeholder="输入内容" onSearch={onSearch} enterButton />
      </div>
      <Table
        columns={columns}
        dataSource={adviselist}
        rowKey={(item) => item._id}
      />
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        key={showdetails._id}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {showdetails.category && (
          <div>
            <p>
              <span>发布人:</span>
              <span>{showdetails.username}</span>
            </p>
            <p>
              <span>发布标题:</span>
              <span>{showdetails.title}</span>
            </p>
            <p>
              <span>发布类型:</span>
              <span>{showdetails.category.join("-")}</span>
            </p>
            <p>
              <span>意见内容:</span>
              <span>
                {showdetails.content
                  .replace(/<[^<>]+>/g, "")
                  .replace(/&nbsp;/gi, "")}
              </span>
            </p>
            <p>
              <span>发布时间:</span>
              <span>
                {moment(showdetails.time).format("YYYY-MM-DD hh:mm:ss")}
              </span>
            </p>
          </div>
        )}
      </Modal>
    </div>
  );
}
